<template>
  <div class="brand-container">
    <div class="wrap">
      <header>
        <div class="weather">
          <img :src="imgSrc">
          <div>
            <span class="text">{{ weatherData.tem }}°C</span>
            <span class="text">{{ weatherData.wea }}</span>
            <span class="text">最近更新时间：{{ weatherData.update_time }}</span>
          </div>
        </div>
<!--        <div class="center-header">-->
          <h2>新冠疫情舆情分析可视化平台</h2>
<!--        </div>-->
        <el-button type="info" round class="header-button" @click="clickNotify">使用说明</el-button>

        <div class="showTime">
          <span class="time">{{ nowTime }}</span>
          <span class="time">{{ week }}</span>
          <span class="time">{{ date }}</span>
        </div>
      </header>

      <section class="mainbox">
        <div class="item left">
          <div class="panel">
            <h2>主题分布</h2>
            <distribution ref="topic" @change="clickTopic"/>
            <!--            <income/>-->
            <div class="panel-footer"></div>

          </div>
          <div class="panel">
            <div class="top-word">
              <h2>主题热度变化</h2>
              <el-button type="text" class="top-button" @click="topWordButton">显示总览</el-button>
            </div>
            <topicChange ref="topicChange" @change="clickTopic"/>
            <div class="panel-footer"></div>
          </div>
          <div class="panel">
            <h2>词云图</h2>
            <wordCloud ref="wordCloud"/>
            <div class="panel-footer"></div>
          </div>
        </div>

        <div class="item center">
          <div class="resume">
            <div class="resume-hd">
              <ul>
                <li>
                  <countTo :startVal='startVal' :endVal='content_cnt' :duration='6000' separator=""></countTo>
                </li>
                <li>
                  <countTo :startVal='startVal' :endVal='comment_cnt' :duration='6000' separator=""></countTo>
                </li>
                <li>
                  <countTo :startVal='startVal' :endVal='click_cnt' :duration='6000' separator=""></countTo>
                </li>
              </ul>
            </div>
            <div class="resume-bd">
              <ul>
                <li>正在分析的微博博文条数</li>
                <li>正在分析的微博评论条数</li>
                <li>平台点击量</li>
              </ul>
            </div>
          </div>
          <div class="map">
            <vue-seamless-scroll class="center-scroll" :data="center_scroll_data" :class-option="classOptionLeft">
              <ul class="item">
                <li class="li-item" v-for="(item, index) in center_scroll_data" :key="index">
                  <span>{{ item }}</span>
                </li>
              </ul>
            </vue-seamless-scroll>

            <h2>微博博文来源地图</h2>
            <div class="chart" id="chart_map"></div>
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
          </div>
        </div>

        <div class="item right">
          <div class="panel">
            <div class="top-word">
              <h2 ref="topic_detail_title">所有主题前12词语权重详情</h2>
              <el-button type="text" class="top-button" @click="topWordButton">显示总览</el-button>
            </div>
            <topicDetail ref="topic_detail"/>
            <div class="panel-footer"></div>
          </div>

          <div class="panel">
            <h2 ref="theme_title"></h2>
            <autoScroll ref="auto_scroll"/>
            <div class="panel-footer"></div>
          </div>
          <div class="panel">
            <div class="top-word">
              <h2 ref="sentiment_heatmap_title">所有主题情感热力图</h2>
              <el-button type="text" class="top-button" @click="topWordButton">显示总览</el-button>
            </div>
            <sentiment-heatmap ref="sentiment_heatmap" @change="clickTopic"/>
<!--            <business ref="hot_word"/>-->
            <div class="panel-footer"></div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import '@/assets/js/flexible'
import '@/assets/js/china'
import home from '@/api/home'
import countTo from 'vue-count-to'
import topicChange from "@/components/topicChange";
import distribution from "@/components/distribution";
import topicDetail from "@/components/topicDetail";
import autoScroll from "@/components/autoScroll";
import vueSeamlessScroll from 'vue-seamless-scroll'
import SentimentHeatmap from "@/components/sentimentHeatmap";
import {geo} from "@/assets/js/geo";

export default {
  name: 'index',
  components: {
    SentimentHeatmap,
    topicChange,
    countTo,
    distribution,
    topicDetail,
    autoScroll,
    vueSeamlessScroll
  },
  data() {
    return {
      nowTime: '',
      week: '',
      date: '',
      imgSrc: '',
      weatherData: {},
      click_cnt: 0,
      content_cnt: 0,
      comment_cnt: 0,
      startVal: 0,
      lda_class_data: {},
      theme_cnt: [],
      center_scroll_data: [],
      option: {},
      cityOption: {},
      geoCoordMap: {},
      isNotify: false,
      topicColor: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05']
    }
  },
  computed: {
    classOptionLeft() {
      return {
        step: 1, //数值越大速度滚动越快
        limitMoveNum: 5, //开始无缝滚动的数据量  //this.fourDatata.length
        hoverStop: true, //是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        // openWatch: true, //开启数据实时监控刷新dom
        singleHeight: 30, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 4000, //单步运动停止的时间(默认值1000ms)
      };
    }
  },
  created() {
    this.visit();
  },
  mounted() {
    this.getCountData();
    this.nowTimes();
    this.getWeather();
    this.getCharts();
    this.getCenterScroll();
  },
  methods: {
    timeFormat(timeStamp) { //显示当前时间
      let newDate = new Date(timeStamp);
      let year = newDate.getFullYear();
      let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
      let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
      let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
      let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
      let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
      let week = newDate.getDay();
      let weeks = ['日', '一', '二', '三', '四', '五', '六'];
      let getWeek = '星期' + weeks[week];
      this.week = getWeek;
      this.date = year + '.' + month + '.' + date;
      this.nowTime = hh + ':' + mm + ':' + ss;
    },
    getCountData() {
      home.getCountData().then(res => {
        res = res.data;
        this.click_cnt = res.click_cnt;
        this.comment_cnt = res.comment_cnt;
        this.content_cnt = res.content_cnt;
      })
    },
    visit() {
      home.visit();
    },
    nowTimes() {
      this.timeFormat(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear();
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null;
    },
    getWeather() { // 第三方天气api接口
      home.getWeather().then(res => {
        if (res.code === 200) {
          res = JSON.parse(res.data);
          if (res.wea_img === 'xue') {
            this.imgSrc = require('../assets/img/brand/xue.png');
          } else if (res.wea_img === 'yin') {
            this.imgSrc = require('../assets/img/brand/yin.png');
          } else if (res.wea_img === 'yu' || res.wea_img === 'bingbao') {
            this.imgSrc = require('../assets/img/brand/yu.png');
          } else if (res.wea_img === 'yun') {
            this.imgSrc = require('../assets/img/brand/yun.png');
          } else if (res.wea_img === 'wu') {
            this.imgSrc = require('../assets/img/brand/wu.png');
          } else if (res.wea_img === 'shachen') {
            this.imgSrc = require('../assets/img/brand/shachen.png');
          } else if (res.wea_img === 'lei') {
            this.imgSrc = require('../assets/img/brand/lei.png');
          } else {
            this.imgSrc = require('../assets/img/brand/qing.png');
          }
          this.weatherData = res;
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getCharts() {
      home.getCharts().then(res => {
        if (res.code === 200) {
          this.$refs.wordCloud.optionData = JSON.parse(res.data.word_cloud_option)
          this.$refs.wordCloud.getEchart()
          this.$refs.sentiment_heatmap.chartOption = JSON.parse(res.data.sentiment_option)
          this.$refs.sentiment_heatmap.getEchart()
          this.$refs.sentiment_heatmap.lda_class_data = JSON.parse(res.data.lda_class_detail_option)
          // this.$refs.hot_word.chartOption = JSON.parse(res.data.hot_word_option)
          // this.$refs.hot_word.getEchartLeft1()
          this.$refs.topic.dataOption = JSON.parse(res.data.topic_option)
          this.$refs.topic.color = this.topicColor
          this.$refs.topic.getEchart()
          this.$refs.topicChange.chartOption = JSON.parse(res.data.topic_change_option)
          this.$refs.topicChange.topicColor = this.topicColor
          this.$refs.topicChange.getEchartLeft1()
          this.$refs.topic_detail.chartOption = JSON.parse(res.data.lda_class_detail_option)
          this.$refs.topic_detail.topWordOption = JSON.parse(res.data.top_word_option)
          this.lda_class_data = JSON.parse(res.data.lda_class_detail_option)
          this.$refs.topic_detail.getEchart(-1)
          let themeData = JSON.parse(res.data.theme_scroll_option)
          this.$refs.auto_scroll.themeData = themeData.theme_data
          this.theme_cnt = themeData.theme_cnt
          this.$refs.auto_scroll.refreshData(0)
          this.$refs.theme_title.innerText = this.lda_class_data[0].title + '-主题 微博话题详情 话题总数：' + this.theme_cnt[0].toString()
          this.cityOption = JSON.parse(res.data.city_option)
          this.getEchart();
        } else {
          this.$message.error("请求图表参数失败")
        }
      })
    },
    getCenterScroll() {
      home.getCenterScroll().then(res => {
        if (res.code === 200) {
          this.center_scroll_data = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    topWordButton() {
      this.$refs.topicChange.cancelHighlight()
      this.$refs.sentiment_heatmap.cancelHighlight()
      this.$refs.topic_detail.getEchart(-1)
      this.$refs.topic_detail_title.innerText = '所有主题前12词语权重详情'
      this.$refs.sentiment_heatmap_title.innerText = '所有主题情感热力图'
    },
    clickNotify() {
      // const h = this.$createElement;
      let outer = this;
      if (!this.isNotify) {
        this.isNotify = true;
        this.$notify({
          title: '平台使用说明',
          duration: 0,
          message: 'balabala',
          onClose: function () {
            outer.isNotify = false;
          }
        });
      }
    },
    async clickTopic(index) {
      this.$refs.sentiment_heatmap.highlight(index)
      this.$refs.topicChange.highlight(index)
      this.$refs.topic_detail.getEchart(index)
      this.$refs.topic_detail_title.innerText = this.lda_class_data[index].title + '-主题详情 总权重：' + this.lda_class_data[index].sum_weight
      this.$refs.auto_scroll.refreshData(index);
      this.$refs.theme_title.innerText = this.lda_class_data[index].title + '-主题 微博话题详情 话题总数：' + this.theme_cnt[index].toString()
      this.$refs.sentiment_heatmap_title.innerText = this.lda_class_data[index].title + '-主题 情感热力图详情'
    },
    convertData(data) { // 地图数据转换
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let dataItem = data[i];
        let fromCoord = this.geoCoordMap[dataItem[0].name];
        let toCoord = this.geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            toName: dataItem[1].name,
            coords: [fromCoord, toCoord],
            value: dataItem[1].value
          });
        }
      }
      return res;
    },
    getEchart() { // 初始化地图数据
      let myChart = this.$echarts.init(document.getElementById('chart_map'));

      this.geoCoordMap = geo

      let color = ["#fff", "#fff", "#fff"]; //航线的颜色
      let series = [];

      let outer = this
      let seriesData1 = []
      let seriesData2 = []
      this.cityOption.forEach((k) => {
        if (k[0] in outer.geoCoordMap) {
          let value = outer.geoCoordMap[k[0]].concat([k[1]])
          if (value[2] < 100)
            seriesData1.push({
              name: k[0],
              value: value
            })
          else
            seriesData2.push({
              name: k[0],
              value: value
            })
        }
      });
      series.push(
        {
          name: "相关微博数量＜100",
          type: "effectScatter",
          coordinateSystem: "geo",
          // zlevel: 2,
          rippleEffect: {
            brushType: "stroke"
          },
          label: {
            show: false,
            position: 'right',
            formatter: "{b}",
            color: 'inherit',
            fontSize: 13
          },
          labelLayout: function () {
            return {
              // dx: 100,
              // x: myChart.getWidth() - 100,
              // x: '94%',
              // y: '25%',
              // moveOverlap: 'shiftX',
              hideOverlap: true
            };
          },
          // labelLine: {
          //   show: true,
          //   length2: 25,
          //   lineStyle: {
          //     color: '#00ffff',
          //   }
          // },
          // labelLine: {
          //   length: 15,
          //   length2: 55,
          //   show: true,
          //   color: '#00ffff',
          //   showAbove: true,
          //   smooth: true
          // },
          // 圆圈大小
          symbolSize: (val) => {
            return Math.log(val[2] * 2);
          },
          itemStyle: {
            normal: {
              color: color[0]
              },
            emphasis: {
              areaColor: "#2B91B7"
            }
          },
          data: seriesData1
        })
      series.push(
          {
            name: "相关微博数量≥100",
            type: "effectScatter",
            coordinateSystem: "geo",
            rippleEffect: {
              brushType: "stroke"
            },
            label: {
              show: false,
              position: 'right',
              formatter: "{b}",
              color: 'inherit',
              fontSize: 13
            },
            labelLayout: function () {
              return {
              //   // x: myChart.getWidth() - 100,
              //   x: '94%',
              //   y: '25%',
              //   moveOverlap: 'shiftY',
                hideOverlap: true
              };
            },
            // labelLine: {
            //   show: true,
            //   length2: 25,
            //   lineStyle: {
            //     color: '#00ffff',
            //   }
            // },
            // 圆圈大小
            symbolSize: (val) => {
              return Math.log(val[2] * 2);
            },
            itemStyle: {
              normal: {
                color: 'orange'
              },
              emphasis: {
                areaColor: "#2B91B7"
              }
            },
            data: seriesData2
          })
      let option = {
        legend: {
          textStyle: {
            color: '#b3ccf8',
            fontSize: 13
          },
          right: '2%',
          top: '10%',
          orient: 'vertical'
        },
        tooltip: {
          trigger: "item",
          // eslint-disable-next-line no-unused-vars
          formatter: (params, ticket, callback) => {
            if (params.seriesType === "effectScatter") {
              return "与" + params.data.name + "相关的微博博文数量：" + params.data.value[2];
            } else if (params.seriesType === "lines") {
              return (
                  params.data.fromName +
                  ">" +
                  params.data.toName +
                  "<br />" +
                  params.data.value
              );
            } else {
              return params.name;
            }
          }
        },
        geo: {
          map: "china",
          label: {
            emphasis: {
              show: true,
              color: "#fff"
            }
          },
          roam: false,
          //   放大我们的地图
          zoom: 1,
          itemStyle: {
            normal: {
              areaColor: "rgba(43, 196, 243, 0.42)",
              borderColor: "rgba(43, 196, 243, 1)",
              borderWidth: 1
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          }
        },
        series: series
      }

      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

  },

}
</script>

<style lang="scss" scoped>
.brand-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;

  .wrap {
    background: url(../assets/img/brand/bg.jpg) no-repeat #000;
    background-size: cover;
    line-height: 1.15;

    header {
      position: relative;
      height: 1rem;
      background: url(../assets/img/brand/head_bg.png) no-repeat top center;
      background-size: 100% 100%;

      h2 {
        color: #7ef0ff;
        font-size: 0.475rem;
        text-align: center;
        line-height: 0.75rem;
        letter-spacing: 1px;
      }

      .header-button {
        position: absolute;
        top: 0;
        left: 15.35rem;
        color: #9bedfc;
        font-size: 0.3rem;
      }

      .weather {
        position: absolute;
        left: 0.375rem;
        top: 0.35rem;
        font-size: 0.25rem;
        color: rgba(126, 240, 255, .7);
        display: flex;

        img {
          width: .45rem;
        }

        span {
          display: inline-block;
        }

        div {
          margin-top: 0.15rem;

        }

        .text {
          margin-left: 0.3rem;
        }
      }

      .showTime {
        position: absolute;
        right: 1rem;
        top: 0.5rem;
        color: rgba(126, 240, 255, .7);
        display: flex;
        font-size: 0.25rem;

        .time {
          //font-size: .28rem;
          margin-right: .18rem;
        }

        .date {
          span {
            display: block;

            &:nth-child(1) {
              //font-size: .12rem;
              text-align: right;
            }

            &:nth-child(2) {
              //font-size: .14rem;
            }
          }
        }
      }
    }

    .mainbox {
      min-width: 1024px;
      max-width: 1920px;
      padding: 0.125rem 0.125rem 0;
      display: flex;

      .item {
        flex: 3;

        &.center {
          flex: 5;
          margin: 0 0.125rem 0.1rem;
          overflow: hidden;

          .resume {
            background: rgba(101, 132, 226, 0.1);
            padding: 0.1875rem;

            .resume-hd {
              position: relative;
              border: 1px solid rgba(25, 186, 139, 0.17);

              ul {
                display: flex;

                %li-line {
                  content: "";
                  position: absolute;
                  height: 50%;
                  width: 1px;
                  background: rgba(255, 255, 255, 0.2);
                  top: 25%;
                }

                li {
                  position: relative;
                  flex: 1;
                  text-align: center;
                  height: 1.2rem;
                  line-height: 1.2rem;
                  font-size: 0.65rem;
                  color: #ffeb7b;
                  padding: 0.05rem 0;
                  font-family: 'DIGITALDREAMFAT';
                  font-weight: bold;

                  &:nth-child(2) {
                    &:after {
                      @extend %li-line;
                      right: 0;
                    }

                    &:before {
                      @extend %li-line;
                      left: 0;
                    }
                  }
                }
              }

              &:before {
                content: "";
                position: absolute;
                width: 30px;
                height: 10px;
                border-top: 2px solid #02a6b5;
                border-left: 2px solid #02a6b5;
                top: 0;
                left: 0;
              }

              &:after {
                content: "";
                position: absolute;
                width: 30px;
                height: 10px;
                border-bottom: 2px solid #02a6b5;
                border-right: 2px solid #02a6b5;
                right: 0;
                bottom: 0;
              }
            }

            .resume-bd {
              ul {
                display: flex;

                li {
                  flex: 1;
                  height: 0.5rem;
                  line-height: 0.5rem;
                  text-align: center;
                  font-size: 0.225rem;
                  color: rgba(255, 255, 255, 0.7);
                  padding-top: 0.125rem;
                }
              }
            }
          }
        }

        %map-style {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 6.475rem;
          height: 6.475rem;
          background: url(../assets/img/brand/map.png) no-repeat;
          background-size: 100% 100%;
          opacity: 0.3;
        }

        .map {
          position: relative;
          height: 10.125rem;

          .center-scroll {
            height: 1.5em;
            margin: 0 auto;
            overflow: hidden;
            color: #b3ccf8;
            font-size: 15px;

            ul {
              list-style: none;
              padding: 0;
              margin: 0 auto;
              li {
                display: block;
                height: 30px;
                line-height: 30px;
                text-align: center;
                justify-content: space-between;

                span {
                  word-wrap: break-word;
                }
              }
            }
          }

          h2 {
            margin-top: 0.15rem;
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #fff;
            font-size: 0.225rem;
            font-weight: 400;
          }

          .chart {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5;
            height: 10.125rem;
            width: 100%;
          }

          .map1 {
            @extend %map-style;
          }

          .map2 {
            @extend %map-style;
            width: 8.0375rem;
            height: 8.0375rem;
            background-image: url(../assets/img/brand/lbx.png);
            opacity: 0.6;
            -webkit-animation: rotate 15s linear infinite;
            animation: rotate 15s linear infinite;
            z-index: 2;
          }

          .map3 {
            @extend %map-style;
            width: 7.075rem;
            height: 7.075rem;
            background-image: url(../assets/img/brand/jt.png);
            -webkit-animation: rotate1 10s linear infinite;
            animation: rotate1 10s linear infinite;
          }
        }

        .panel {
          position: relative;
          height: 3.875rem;
          border: 1px solid rgba(25, 186, 139, 0.17);
          background: rgba(255, 255, 255, 0.04) url(../assets/img/brand/line.png);
          padding: 0 0.1875rem 0;
          margin-bottom: 0.1875rem;

          &:before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
          }

          &:after {
            position: absolute;
            top: 0;
            right: 0;
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
          }

          .panel-footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;

            &:before {
              position: absolute;
              bottom: 0;
              left: 0;
              content: "";
              width: 10px;
              height: 10px;
              border-bottom: 2px solid #02a6b5;
              border-left: 2px solid #02a6b5;
            }

            &:after {
              position: absolute;
              bottom: 0;
              right: 0;
              content: "";
              width: 10px;
              height: 10px;
              border-bottom: 2px solid #02a6b5;
              border-right: 2px solid #02a6b5;
            }
          }

          .top-word {
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #fff;
            font-size: 0.225rem;
            font-weight: 400;

            h2 {
              display: inline-flex;
              margin-left: 15%;
            }

            .top-button {
              width: 15%;
              float: right;
              //vertical-align: center;
            }

          }

          h2 {
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #fff;
            font-size: 0.225rem;
            font-weight: 400;

            a {
              margin: 0 0.1875rem;
              color: #fff;
              text-decoration: none;
            }
          }

          .chart {
            height: 3rem;
          }
        }
      }

    }

  }

}

@-webkit-keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@-webkit-keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}

@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}
</style>
